document.getElementById('dialog-button').onclick = function() {
	var dialogWidth = window.innerWidth - 50,
		dialogHeight = window.innerHeight - 50,
		html_1 = '<p>Trigger <code>setDialog()</code> inside <code>href</code> or <code>onclick</code> attribute:</p><pre><code>&lt;a href=&quot;javascript:setDialog\(\&#39;open&#39;, {title: &#39;Example Title&#39;, content: &#39;Hello!&#39;});&quot;&gt;Open Dialog!&lt;/a&gt;</code></pre><pre><code>&lt;button onclick=&quot;setDialog\(\&#39;open&#39;, {title: &#39;Example Title&#39;, content: &#39;Hello!&#39;});&quot;&gt;Open Dialog!&lt;/button&gt;</code></pre>',
		html_2 = '<h5>Example Markup</h5>' +
		'<pre><code>' +
		'&lt;button id=&quot;dialog-button&quot;&gt;Open Dialog!&lt;/button&gt;' +
		'</code></pre>' + 
		'<h5>Basic JavaScript</h5>' +
		'<pre><code>' +
		'document.getElementById(&#39;dialog-button&#39;).onclick = function() {\n' +
		'    var foo = &quot;Hello!&quot;;\n' +
		'    setDialog(&quot;open&quot;, {\n' +
		'        title: &quot;The Dialog Box Title&quot;,\n' +
		'        width: 400,\n' +
		'        height: 200,\n' +
		'        content: foo\n' +
		'    });\n' +
		'};' +
		'</code></pre>' +
		'<h5>Chainning the Function</h5>' +
		'<p>Whatever you want to setup the next dialog/communication, just trigger back the <code>setDialog</code> function with different configuration for each button. Similar with JQuery UI Dialog:</p>' +
		'<pre><code>' +
		'document.getElementById(&#39;dialog-button&#39;).onclick = function() {\n' +
		'    setDialog(&quot;open&quot;, {\n' +
		'        title: &quot;The Dialog Box Title&quot;,\n' +
		'        width: 400,\n' +
		'        height: 200,\n' +
		'        content: &quot;Hello!&quot;,\n' +
		'        buttons: {\n' +
		'            &quot;Delete&quot;: function() {\n' +
		'                setDialog(&quot;open&quot;, {\n' +
		'                    title: &quot;Confirmation&quot;\n' +
		'                    content: &quot;Are you sure?&quot;\n' +
		'                    buttons: {\n' +
		'                        &quot;Yes&quot;: function() {\n' +
		'                            setDialog(&quot;close&quot;);\n' +
		'                        },\n' +
		'                        &quot;No&quot;: function() {\n' +
		'                            alert(&quot;Canceled!&quot;);\n' +
		'                            setDialog(&quot;close&quot;);\n' +
		'                        }\n' +
		'                    }\n' +
		'                });\n' +
		'            }\n' +
		'        }\n' +
		'    });\n' +
		'};' +
		'</code></pre>';
	function fn_1() {
		setDialog("open", {
			title: "Inline Function Example",
			content: html_1,
			width: dialogWidth,
			height: dialogHeight,
			buttons: {
				"Separated Function Example": fn_2
			}
		});
	}
	function fn_2() {
		setDialog("open", {
			title: "Separated Function Example",
			content: html_2,
			width: dialogWidth,
			height: dialogHeight,
			buttons: {
				"Inline Function Example": fn_1
			}
		});
	}
	setDialog("open", {
		title: 'Click the Button!',
		content: "<div style='text-align:right;font-size:200%;font-weight:bold;line-height:normal;color:green;'>&dArr;&nbsp;&nbsp;&nbsp;</div>",
		buttons: {
			"Inline Function Example": fn_1
		}
	});
};
function advancedExample() {
	var html = 'Delete all files?';
	setDialog("open", {
		title: 'An Example Dialog Box',
		content: html,
		buttons: {
			"Delete": function() {
				setDialog("open", {
					title: "Confirmation",
					content: "Are you sure?",
					buttons: {
						"Yes": function() {
							/* Just a demonstration */
							var count = 0;
							var interval = setInterval(function() {
								setDialog("open", {
									title: "Please wait...",
									content: "Deleting <strong>" + count + "</strong> files",
									buttons: false,
									specialClass: "launched"
								});
								if (count == 50) {
									clearInterval(interval);
									setTimeout(function() {
										setDialog("close");
									}, 1000);
								}
								count++;
							}, 100);
							/* End demonstration */
						},
						"No": function() {
							setDialog("open", {
								content: "<span style='font-weight:bold;color:red;'>Canceled!</span>",
								specialClass: "aborted"
							});
						}
					}
				});
			}
		}
	});
}
function showCode() {
	setDialog("open", {
		title: "Code Snippet",
		content: "<pre><code>setDialog(&quot;open&quot;, \{\n    title\: &quot;Options&quot;\,\n    width: 600\,\n    content\: &quot;Click the buttons below!&quot;\,\n    buttons\: \{\n        &quot;Cancel&quot;\: function\(\) \{\n            alert\(&#39;Canceled!&#39;\);\n        }\,\n        &quot;Visit DTE \:\]&quot;\: function\(\) \{\n            window.open\(&#39;http://www.dte.web.id&#39;\,&#39;&#39;\,&#39;&#39;);\n        }\,\n        &quot;Insert a Hello Text&quot;\: function\(\) \{\n            this\.parentNode\.parentNode\.children\[3\].innerHTML \+\= &#39; &lt;strong&gt;Hello!&lt;\/strong&gt;&#39;\n        }\,\n        &quot;Show the Code&quot;\: function\(\) \{\}\,\n        &quot;Reload&quot;: function\(\) \{\n            window\.location\.reload\(\);\n        \}\n    \}\n\}\);</code></pre>",
		width: window.innerWidth - 30,
		height: window.innerHeight - 30
	});
}
function pluginLimit() {
	setDialog("open", {
		title: "Plugin Limitation &#x26A0;",
		content: '<ol><li>No resizable feature</li><li>Cannot open multiple dialog box (only single dialog box with dynamic contents)</li><li>No animation (But, you can do that with <a href="javascript:cssTransition();">CSS Transition</a>)</li></ol>',
		width: 600,
		height: window.innerHeight - 30
	});
}
function cssTransition() {
	var contents = '<h6>CSS Transition:</h6>' +
	'<pre><code>.dialog-box {\n' +
	'  -webkit-transition:\n' +
	'    opacity .5s ease-out,\n' +
	'    width .5s ease-out,\n' +
	'    height .5s ease-out,\n' +
	'    top .5s ease-out,\n' +
	'    left .5s, ease-out,\n' +
	'    margin-top .5s ease-out,\n' +
	'    margin-left .5s ease-out;\n' +
	'  -moz-transition:\n' +
	'    opacity .5s ease-out,\n' +
	'    width .5s ease-out,\n' +
	'    height .5s ease-out,\n' +
	'    top .5s ease-out,\n' +
	'    left .5s, ease-out,\n' +
	'    margin-top .5s ease-out,\n' +
	'    margin-left .5s ease-out;\n' +
	'  -ms-transition:\n' +
	'    opacity .5s ease-out,\n' +
	'    width .5s ease-out,\n' +
	'    height .5s ease-out,\n' +
	'    top .5s ease-out,\n' +
	'    left .5s, ease-out,\n' +
	'    margin-top .5s ease-out,\n' +
	'    margin-left .5s ease-out;\n' +
	'  -o-transition:\n' +
	'    opacity .5s ease-out,\n' +
	'    width .5s ease-out,\n' +
	'    height .5s ease-out,\n' +
	'    top .5s ease-out,\n' +
	'    left .5s, ease-out,\n' +
	'    margin-top .5s ease-out,\n' +
	'    margin-left .5s ease-out;\n' +
	'  transition:\n' +
	'    opacity .5s ease-out,\n' +
	'    width .5s ease-out,\n' +
	'    height .5s ease-out,\n' +
	'    top .5s ease-out,\n' +
	'    left .5s, ease-out,\n' +
	'    margin-top .5s ease-out,\n' +
	'    margin-left .5s ease-out;\n' +
	'}</code></pre>';
	setDialog("open", {
		title: "Animation with CSS Transition",
		content: contents,
		specialClass: "transition",
		width: window.innerWidth - 30,
		height: window.innerHeight -200
	});
}
